<template>
  <div class="guide">
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
    >
      <van-swipe-item v-for="(l, i) in imgs" :key="i">
        <img :src="l.imgSrc" class="gimg" alt="" />
        <van-button
          @click="gotopage('main')"
          v-if="i == imgs.length - 1"
          class="btn"
          type="primary"
          >开启鬼畜之旅</van-button
        >
      </van-swipe-item>
    </van-swipe>

    <van-swipe
      class="my-swipe"
      :autoplay="2500"
      indicator-color="white"
    >
      <van-swipe-item v-for="(l, i) in banner" :key="i">
        <img :src="l.pic" class="gimg" alt="" />
        <van-button
          @click="gotopage('main')"
          v-if="i == banner.length - 1"
          class="btn"
          type="primary"
          >开启鬼畜之旅</van-button
        >
      </van-swipe-item>
    </van-swipe>
    <MySwiper class="my-swipe" id="banner1" :options="options">
        <MySwiperItem class="swiper-slide" v-for="(l, i) in banner" :key="i">
          <img :src="l.pic" class="gimg" alt="" />
          <van-button
            @click="gotopage('main')"
            v-if="i == banner.length - 1"
            class="btn"
            type="primary"
            loop='true'
            >开启鬼畜之旅</van-button
          >
        </MySwiperItem>
      </MySwiper>
    <div class="countdown" @click="gotopage('main')">倒计时{{ num }}s</div>
  </div>
</template>
<script>
let timer = null;
export default {
  name: "guide",
  data() {
    return {
      options: {
        speed: 2500,
        observer: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
      },
      num: 5,
      imgs: [
        {
          imgSrc: require("../../assets/images/img1.webp"),
        },
        {
          imgSrc: require("../../assets/images/img2.jpeg"),
        },
        {
          imgSrc: require("../../assets/images/img3.jpg"),
        },
        {
          imgSrc: require("../../assets/images/img4.jpg"),
        },
        {
          imgSrc: require("../../assets/images/img6.png"),
        },
      ],
      banner: [],
    };
  },
  methods: {
    getBanner() {
      this.$axios.get("http://47.104.209.44:3333/banner?type=2").then((res) => {
        console.log(res);

        // 在下次DOM更新循环结束之后执行延迟回调
        // 延迟执行  setTimeout的效果
        this.$nextTick(() => {
          this.banner = res.data.banners.slice(0, 5);
        });
      });
    },
  },
  created() {
    this.getBanner();
    // 判断一个星期只能看一次
    // visitTime
    let visitTime = this.getCookie("visitTime");
    // console.log(visitTime);
    if (visitTime) {
      // 如果已经进来直接跳转
      this.gotopage('main')
    } else {
      this.setCookie('visitTime',1,7)
    }
  },
  mounted() {
    timer = setInterval(() => {
      if (this.num > 0) {
        this.num--;
      } else {
        clearInterval(timer);
        timer = null;
        this.gotopage("main");
      }
    }, 1000);
  },
  // 组件销毁
  destroyed() {
    timer = null;
  },
};
</script>
<style lang="scss" scoped>
.gimg {
  width: 100%;
  height: 200px;
}
.my-swipe {
  width: 100%;
  height: 100%;
  position: relative;
  .btn {
    height: 35px;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translate(-50%);
  }
}
.countdown {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 80px;
  height: 28px;
  text-align: center;
  border: 1px solid #777;
  background: #0005;
  color: #fff9;
  font-size: 12px;
  font-weight: normal;
  border-radius: 15px;
  line-height: 28px;
  z-index: 100;
}
</style>